<template>

  <el-form-item label="课程" prop="courseInfo.id">
    <el-select v-model="courseInfoId" filterable placeholder="请选择"
               @change="selectCourse(courseInfoId)">
      <el-option
        v-for="item in courseInfos"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="章节">
    <el-select v-model="chapterId" filterable placeholder="请选择">
      <el-option
        v-for="item in chapters"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'ElSelect' ,
  data() {
    return {
      courseInfos: [],
      courseInfoId: '',
      chapters: [],
      chapterId: '',
      show:false,
      videoFlag: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: ''
      },
      videoFile:'',
      config: {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': getToken()
        },
        withCredentials: true
      },
      uploadUrl: `${this.$baseUrl}/project/api/file/fileUpload`,
      headers: {
        Authorization: getToken()
      },
      permission: {
        add: ['admin', 'lesson:add'],
        edit: ['admin', 'lesson:edit'],
        del: ['admin', 'lesson:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'title', display_name: '名称' },
        { key: 'description', display_name: '描述' }
      ]
    }
  },
  methods: {
    // 提交
    submit(){
      let _this = this;
      async function upload() {
        await axios.post(_this.uploadUrl, _this.videoFile, _this.config).then(function(resp) {
          if (resp.data.code === 200) { // 这个200是数值还是？
            _this.crud.form.video = resp.data.data;
          }
        })
        await _this.crud.submitCU();
      }
      upload();
    },
    selectCourse(courseInfoId){
      getAllCourseChapters({courseId:courseInfoId}).then(res => {
        this.chapters = res.content;
        let kong = {id:'',title:'空'}
        this.chapters.push(kong);
        this.chapters.forEach((item)=>{
          this.chaptersM[item.id]=item.title;
        })
      })
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      getAllCourseInfos().then(res => {
        this.courseInfos = res.content;
        this.courseInfos.forEach((item)=>{
          this.courseInfosM[item.id]=item.title;
        })
      })
      getAllCourseChapters().then(res => {
        this.chapters = res.content;
        let kong = {id:'',title:'空'}
        this.chapters.push(kong);
        this.chapters.forEach((item)=>{
          this.chaptersM[item.id]=item.title;
        })
      })
    },
    // 编辑之前
    [CRUD.HOOK.beforeToEdit]() {
      if(this.crud.form.parentId!=null && this.crud.form.parentId!=''){
        this.crud.form.parentId = this.crud.form.parentId+'';
      }
      if(this.crud.form.courseId!=null && this.crud.form.courseId!=''){
        this.crud.form.courseId = this.crud.form.courseId+'';
      }
      if(this.videoForm)
        this.videoForm.showVideoPath = this.crud.form.video;
    }
  }
}
</script>

<style scoped>

</style>
/***
片段
【1】这时候id为数值型，而select组件默认字符串，就匹配不到，需要在[CRUD.HOOK.beforeToEdit]里面转型成string。
:key="item.id"
:label="item.title"
:value="item.id"
【2】select二级联动
第一个select，加一个@change="selectCourse(courseInfoId)"方法。
后台：CourseChapterQueryCriteria.java，增加一个查询条件，作为联动
/** 模糊 */
@Query(type = Query.Type.EQUAL)
private Long courseId;

**/
